<template>
  <div class="background">
    <div class="login-wrap">
      <el-form label-position="left" :model="form" :rules="rule" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
        <h3 class="title">用户注册</h3>
        <el-form-item prop="username">
          <el-input type="text" v-model="form.username"  placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input type="password" v-model="pwd"  placeholder="确认密码"></el-input>
        </el-form-item>

        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="ajxa(form.username,form.password,pwd)" >注册</el-button>
        </el-form-item>
        <el-link href="/login">已经有账号？ 点击登录</el-link>
      </el-form>
    </div>
  </div>


</template>

<script>
export default {
  name: 'register',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value.length<=5) {
        callback(new Error('密码长度不能小于6位'));
      }
      return callback();
    };


    return {
      form:{
        username: '',
        password: '',
        permission:0
      },
      pwd: '',


      rule:{
        username:[
          {required:true,message:'请输入账号',trigger:'blur'}

        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {validator:validatePass,trigger:'blur'}

        ],
        pwd:[
          {required:true,message:'请再次输入密码',trigger:'blur'},
        ]
      }
    }
  },
  methods: {



    ajxa : function(username,password,pwd){

      this.$refs.ruleForm.validate(valid=>{
        console.log(valid);
        if(!valid) return;
        if (pwd!=password||username=='')
        {
          this.$message.error('两次密码不一致');
        }
        else{
          this.$axios.get('/api/user/register',{
            params: {
              username: username,

            }
          }).then(res=>{
            let form = this.form;
            if(res.data==false){this.$axios.post('/api/user/insert',form
            ).then(res=>{
              this.$message.success('注册成功');
              this.$router.push('/');
            }).catch(err=>{
              console.log(err);
            })
            }
            else{ this.$message.error('用户名已经被注册');}

          }).catch(err=>{
            console.log(err);
          })

        }
      })
    }




  }
}
</script>
<style>
.background {
  background: url('../../../static/images/bg.jpg') center center no-repeat;
  height: 920px;
}
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
</style>
